<template>
	<view class="box">
		<view class="mt-85 text-center size-26">
			<text class="mr-10">支付剩余时间</text>
			<u-count-down :timestamp="time" font-size="26"></u-count-down>
		</view>
		<view class="yellow bold mt-15 text-center">
			<text>￥</text>
			<text class="size-40">{{price}}</text>
		</view>
		<view class="bg-white pt-30 mt-80">
			<view class="size-34 bold plr-36 mb-20">
				支付方式
			</view>
			<view class="plr-36">
				<u-radio-group v-model="value" active-color="#00C28E">
					<u-radio name="1" class="w100 bb ptb-30">
						<view class="flex_l">
							<image style="width: 55rpx;height: 55rpx; margin-right: 20rpx;" src="../../static/wx.png" mode=""></image>
							微信支付
						</view>
					</u-radio>
					<!-- #ifdef APP-PLUS -->
					<u-radio name="2" class="w100 ptb-30">
						<view class="flex_l">
							<image style="width: 55rpx;height: 55rpx; margin-right: 20rpx;" src="../../static/zfb.png" mode=""></image>
							支付宝支付
						</view>
					</u-radio>
					<!-- #endif -->
					<!-- <u-radio name="3" class="w100 ptb-30">
						<view class="flex_l">
							<image style="width: 55rpx;height: 55rpx; margin-right: 20rpx;" src="../../static/wallet.png" mode=""></image>
							余额支付
						</view>
					</u-radio> -->
				</u-radio-group>
			</view>
		</view>
		<view class="fixed-bottom pd-36">
			<u-button type="primary" @click="pay">确认支付</u-button>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
  import {showToast} from "../../utils/index";
	export default {
		data() {
			return {
				order_id: '',
				coupon_id:'',
				price: '',
				time: 0,
				value: 1,
				code: '',
        url:""
			};
		},
		computed: {
			// ...mapState(['url'])
		},
		onLoad(option) {
			this.order_id = option.id
			this.coupon_id = option.coupon_id
			this.init()
			// #ifdef H5
			// console.log(location.href);
			// 回调回来接收code，然后调取支付
			// if (location.href.includes('code')) {
			// 	this.code = location.href.split('?')[1].split('&')[0].split('=')[1]
			// 	this.payAPI()
			// } else {
			// 	this.$store.commit('getUrl', encodeURIComponent(location.href))
			// }
			// #endif
		},
		methods: {
      init() {
        this.$http('/addons/ddrive/hyorder/info', {
          order_id: this.order_id
        }).then(data => {
          this.price = data.discount_price
          this.time = data.createtime + 15 * 60 - (new Date()).getTime() / 1000
        })
      },
      pay() {
        try {
          uni.showLoading({
            title: '准备支付中',
            mask: true
          });
          this.$http('/addons/ddrive/hyorder/driver_pay', {
            order_id: this.order_id,
            coupon_id: this.coupon_id,
            type: 'user_wechat',
          }, "POST").then(data => {
            console.log(data);
            if(data == '非会员不允许接单'){
              showToast(data, 'error');
              setTimeout(() => {
                uni.switchTab({
                  url: '/pages/my/index'
                })
              }, 2000)
            }else {

              const _this = this
              this.$JSSDK.config({
                debug: false,
                appId: data.appId,
                timestamp: data.timeStamp,
                nonceStr: data.nonceStr,
                signature: data.signature,
                jsApiList: ["chooseWXPay"]
              })
              this.$JSSDK.ready(function () {
                _this.$JSSDK.chooseWXPay({
                  appId: data.appId,
                  timestamp: data.timeStamp,
                  nonceStr: data.nonceStr,
                  package: data.package,
                  signType: data.signType,
                  paySign: data.paySign,
                  success: function (res) {
                    uni.hideLoading()
                    showToast('支付成功', 'success');
                    _this.qiangDan(_this.order_id)
                    // _this.handleRecordList()
                  },
                  fail: function (error) {
                    console.error(error)
                    uni.hideLoading()
                    showToast('支付失败', 'none')
                  }
                })
              })
            }
          });
        } catch (err) {
          showToast("支付失败", "none");
        } finally {
          uni.hideLoading()
        }
        // value  1 微信  2 支付宝  3 余额
        // 如果是H5的微信支付，需要先授权，授权回调回来获取code，再调取支付
        // if (this.value == 1) {
        // 	// #ifdef H5
        // 	location.href =
        // 		`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx9f0c3a5ea0ad7182&redirect_uri=${this.url}&response_type=code&scope=snsapi_base&state=STATE#wechat_re`
        // 	// #endif
        // 	// #ifdef MP-WEIXIN
        // 	let _this = this
        // 	uni.login({
        // 	  provider: 'weixin',
        // 	  success(loginRes) {
        // 	    console.log(loginRes);
        // 			_this.code = loginRes.code
        // 			_this.payAPI()
        // 	  }
        // 	});
        // 	// #endif
        // 	// #ifdef APP-PLUS
        // 	this.payAPI()
        // 	// #endif
        // } else {
        // 	this.payAPI('alipay')
        // }
      },
      qiangDan(id) {
        this.$http('/addons/ddrive/hyorder/tasking', {
          order_id: id
        }, "POST").then(() => {
          uni.showToast({
            title: '抢单成功'
          })
          // setTimeout(() => {
            this.toDetail(id)
          // }, 200)
        })
      },
      toDetail(id) {
        // alert(id)
        window.location.href="https://hcb-driver.dindong.cn/#/pages/huoyun/order-detail?id="+id
        // uni.navigateTo({
        //   url: '/pages/huoyun/order-detail?id=' + id
        // })
      },
			radioChange(e) {
				this.value = e.detail.value
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-primary-hover {
		background: linear-gradient(to right,#00b6b4,#00d496) !important;
	}
	/deep/.u-radio {
		display: flex;
		flex-direction: row-reverse;
	}

	/deep/.u-radio-group {
		width: 100% !important;
	}

	/deep/.u-radio__label {
		width: 100%;
	}
</style>
